<script setup lang="ts">
  import { ref } from 'vue'
  import { NTooltip, NButton } from 'naive-ui'
  import { SIcon } from '@xtail/vue3'
  import type { CollapseBtnPropsType } from './types'

  defineOptions({
    name: 'XCollapseBtn'
  })

  withDefaults(defineProps<CollapseBtnPropsType>(), {
    iconProps: {} as any,
    text: '',
    btnProps: {} as any,
    click: () => {},
    collapse: false,
    disabled: false,
    tooltipProps: {} as any
  })

  const elTooltipRef = ref()
  const elBtn = ref()
  defineExpose({
    elTooltipRef,
    elBtn
  })
</script>

<template>
  <div class="x-collapse-btn">
    <n-tooltip
      ref="elTooltipRef"
      v-bind="{
      ...tooltipProps,
      disabled: !collapse || disabled
    }"
    >
      <template #trigger>
        <slot name="btn">
          <n-button
            ref="elBtn"
            v-bind="{
              size: 'small',
              ghost: true,
              ...btnProps,
            }"
            @click="(evt: MouseEvent) => click(evt)"
          >
            <template #icon>
              <slot name="btn-icon">
                <s-icon v-bind="iconProps" />
              </slot>
            </template>
            <template v-if="text && !collapse" #default>
              <slot name="btn-text">
                {{ text }}
              </slot>
            </template>
          </n-button>
        </slot>
      </template>
      <template #default>
        <slot name="tooltip">
          {{ text }}
        </slot>
      </template>
    </n-tooltip>
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
